<template>
  <div id="app">
    <div>
      <span>姓名:</span>
      <input type="text" v-model="uname" />
    </div>
    <div>
      <span>年龄:</span>
      <input type="number" v-model="age" />
    </div>
    <div>
      <span>性别:</span>
      <select v-model="sex">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <div>
      <button @click.prevent="bool ? add() : xg(xgid)">
        {{ bool ? "添加" : "修改" }}
      </button>
    </div>
    <div>
      <table border="1" cellpadding="10" cellspacing="0">
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
        <tr v-for="itme in arr" :key="itme.id">
          <td>{{ itme.id }}</td>
          <td>{{ itme.uname }}</td>
          <td>{{ itme.age }}</td>
          <td>{{ itme.sex }}</td>
          <td>
            <button @click.prevent="remove(itme.id)">删除</button>
            <button @click.prevent="revise(itme.id)">编辑</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  // name: "",
  data() {
    return {
      arr: [],
      uname: "",
      age: "",
      sex: "",
      // obj: {},
      id: 1,
      bool: true,
      xgid: "",
    };
  },
  methods: {
    add() {
      let obj = {};
      obj.id = this.id++;
      obj.uname = this.uname;
      obj.age = this.age;
      obj.sex = this.sex;
      this.arr.push(obj);
      this.uname = "";
      this.age = "";
      this.sex = "";
    },
    remove(rem) {
      this.arr.splice(
        this.arr.findIndex((itme) => itme.id === rem),
        1
      );
    },
    revise(re) {
      this.uname = this.arr[this.arr.findIndex((itme) => itme.id === re)].uname;
      this.age = this.arr[this.arr.findIndex((itme) => itme.id === re)].age;
      this.sex = this.arr[this.arr.findIndex((itme) => itme.id === re)].sex;
      this.xgid = re;
      this.bool = false;
    },
    xg(re) {
      this.arr[this.arr.findIndex((itme) => itme.id === re)].uname = this.uname;
      this.arr[this.arr.findIndex((itme) => itme.id === re)].age = this.age;
      this.arr[this.arr.findIndex((itme) => itme.id === re)].sex = this.sex;
      this.bool = true;
      this.uname = "";
      this.age = "";
      this.sex = "";
    },
  },
  computed: {},
};
</script>

<style>
.wrap {
  width: 100%;
  display: flex;
  margin: 0.2rem 0 0 0;
  position: relative;
}

/*左侧的导航样式*/
.nav_left {
  width: 21.1875rem;
  overflow: scroll;
}

.nav_left::-webkit-scrollbar {
  display: none;
}

.nav_content {
  white-space: nowrap;
  padding: 0 0.7rem;
}

.nav_content span {
  display: inline-block;
  padding: 0.4rem 0.6rem;
  font-size: 0.875rem;
}

.nav_content .active {
  border-bottom: 2px solid #7f4395;
  color: #7f4395;
}

.nav_left,
.down {
  float: left;
}

/*右侧导航部分*/
.down {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gray {
  color: gray;
  display: inline-block;
  vertical-align: middle;
}
</style>
